import React from 'react';
import ReactEcharts from 'echarts-for-react';

var createReactClass = require('create-react-class');
const AlertReason = createReactClass({
  propTypes: {},
  getOtion: function() {
    const option = {
      fontFamily: 'global',
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
      legend: {
        orient: 'horizontal',
        top: '30px',
        data: ['未戴安全帽', '未系安全带', '临边防护缺失'],
      },
      series: [
        {
          name: 'risk',
          type: 'pie',
          top: '30px',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 500, name: '未戴安全帽' },
            { value: 500, name: '未系安全带' },
            { value: 50, name: '临边防护缺失' },
          ],
        },
      ],
    };

    return option;
  },
  render: function() {
    return (
      <ReactEcharts
        option={this.getOtion()}
        theme="dark"
        style={{ height: '99%', width: '100%' }}
        className="react_for_echarts"
      />
    );
  },
});

export default AlertReason;
